<template>
	<view>
		<form @submit="formSubmit" @reset="formReset">
			<view style="padding-left: 40rpx;padding-right: 40rpx;">
				<view class="title">涉事人信息</view>
				<view>
					<view class="uni-form-item uni-column">
						<view class="sub-title"><text class="star">*</text>涉事人姓名</view>
						<input style="display: inline-block;" class="uni-input" name="name" placeholder="请输入涉事人姓名" />
					</view>
					<view class="divider"></view>
					<view class="uni-form-item uni-column">
						<view class="sub-title"><text class="star">*</text>涉事人手机号</view>
						<input class="uni-input" name="mobile" placeholder="请输入涉事人的手机号" />
					</view>
					<view class="divider"></view>
					<view class="uni-form-item uni-column">
						<view class="sub-title">性别</view>
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindGenderChange" :value="genderIndex" :range="genderArray">
									<input name="sex" class="uni-input" :value="genderArray[genderIndex]" disabled />
								</picker>
							</view>
						</view>
						<view class="divider"></view>
						<view class="uni-form-item uni-column">
							<view class="sub-title">出生日期</view>
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
										<input class="uni-input" name="birthday" :value="date" disabled/>
									</picker>
								</view>
							</view>
						</view>
						<view class="divider"></view>
						<view class="sub-title">证件类型</view>
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindCredentialChange" :value="credentialIndex" :range="credentials">
									<input disabled class="uni-input" name="document_type" :value="credentials[credentialIndex]"></input>
								</picker>
							</view>
						</view>
						<view class="divider"></view>
						<view class="sub-title">证件号码</view>
						<input class="uni-input" name="document_number" placeholder="请输入证件号码" />
						<view class="divider"></view>
						<view class="sub-title">车牌号</view>
						<input class="uni-input" name="car_number" placeholder="请输入车牌号" />
						<view class="divider"></view>
						<view class="sub-title">居住地址</view>
						<view class="content">
							<input class="uni-input" name="house_address" placeholder="请选择居住地址" :value="pickerText" disabled @tap="openAddres" />
							<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
							 themeColor='#007AFF'></simple-address>
						</view>
						<view class="divider"></view>
						<view class="sub-title">详细地址</view>
						<input class="uni-input" name="input" placeholder="请输入详细地址" />
						<view class="divider"></view>
					</view>
				</view>
				<view class="title">举报人信息</view>
				<view class="uni-form-item uni-column">
					<view class="sub-title">
						<!-- <text class="star">*</text> -->
						举报人姓名</view>
					<input class="uni-input" name="feedback_name" placeholder="请输入您的姓名" />
				</view>
				<view class="divider"></view>
				<view class="uni-form-item uni-column">
					<view class="sub-title">
						<!-- <text class="star">*</text> -->
						举报人手机号
						</view>
					<input class="uni-input" name="feedback_phone" placeholder="请输入您的手机号" />
				</view>
				<view class="divider"></view>
				<view class="uni-form-item uni-column">
					<view class="sub-title">备注</view>
					<view class="uni-textarea">
						<textarea @blur="bindTextAreaBlur" name="remark" id="ta-remark" auto-height />
					</view>
				</view>
				<view class="uni-btn-v" style="margin-bottom: 40rpx;">
					<button form-type="submit">提交</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import simpleAddress from "@/components/simple-address/simple-address.nvue"
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				addressData: {},
				genderArray: ['男', '女'],
				credentials: ['身份证', '回乡证', '护照', "军官证", "同胞证", "港澳居民居住证"],
				credentialIndex: 0,
				genderIndex: 0,
				date: currentDate,
				time: '12:01',
				cityPickerValueDefault: [0, 0, 0],
				pickerText: '',
			}
		},
		onLoad() {

		},
		components: {
			simpleAddress
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			openAddres() {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.pickerText = e.label;
				this.addressData = e;
			},
			bindGenderChange: function(e) {
				this.genderIndex = e.target.value
			},
			bindCredentialChange: function(e) {
				this.credentialIndex = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			formSubmit: function(e) {
				const formData = e.detail.value;
				const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
				if(!formData.name){
					uni.showToast({title:"请输入涉事人姓名", icon:"none"});
					return;
				}
				if(!formData.mobile){
					uni.showToast({title:"请输入涉事人手机号", icon:"none"});
					return;
				}
				if(!reg.test(formData.mobile)){
					uni.showToast({ title: "涉事人手机号不正确", icon: "none" });
					return;
				}
				// if(!formData.feedback_name){
				// 	uni.showToast({title:"请输入举报人姓名", icon:"none"});
				// 	return;
				// }
				// if(!formData.feedback_phone){
				// 	uni.showToast({title:"请输入举报人手机号", icon:"none"});
				// 	return;
				// }
				// if(!reg.test(formData.feedback_phone)){
				// 	uni.showToast({ title: "举报人手机号不正确", icon: "none" });
				// 	return;
				// }
				if(this.addressData['provinceCode'])
					formData['province_id'] = this.formatCode(this.addressData['provinceCode'])
				if(this.addressData['cityCode'])
					formData['city_id'] = this.formatCode(this.addressData['cityCode'])
				if(this.addressData['areaCode'])
					formData['area_id'] = this.formatCode(this.addressData['areaCode'])
				this.$http.HttpPostForm("involverInfos/", formData).then((res)=>{
					if(res.statusCode === 201){
						uni.showToast({
						    title: '提交成功，感谢您的反馈',
						    duration: 5000,
							complete:function(){
								uni.redirectTo({
								    url: '/pages/index/index'
								});
							}
						});
					}
				})
			},

			formatCode(code){
				return code;
				if(code.length === 6){
					return code;
				}
				let s = ""
				for(let i=0;i<6-code.length;i++){
					s = s + "0"
				}
				return code + s;
			}
		}
	}
</script>

<style>
	input{
		height: 70rpx;
	}
	
	.star{
		color: red;
	}
	
	#from{
		padding-left: 100rpx;
	}
	
	.uni-form-item .title {
		padding: 20rpx 0;
	}

	#ta-remark{
		min-height: 100rpx;
	}

	.radio {
		top: 50%;
		transform: translate(0%, 25%);
	}

	.title {
		font-size: 50rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.sub-title {
		font-size: 35rpx;
		margin-bottom: 25rpx;
	}

	.divider {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background-color: #DDDDDD;
		height: 1rpx;
		width: 100%;
		border: none;
	}
	
	.uni-form-item{
		position: relative;
	}

	.label {
		display: flex;
		position: relative;
	}
</style>
